HOME |  BACK |  NEXT |  _  WORDLIST |  TOPICS |  _  AUTHORS |  E-MAIL |  _  INDEX | -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

WWWE LogoTopic:

Transparent GIFs

Using graphics in Web documents is as essential as crackers are to soup. You can do without them, but they make things ever so much better. Many types of graphic may be used on the Web but GIFs are the most common. A GIF may have many characteristics, including:

Of these three, transparency is the most unique and important. Transparency allows a graphic to become a seamless part of an Web document. The easiest way to explain this concept is to show you a transparent image and a non-transparent image side by side.

transparentnon-transparent

The only difference between these two images is that the image on the left has its blue area defined as transparent.

Creating Transparent Images

Creating a transparent image is very simple. All you need is a graphics program that can embed transparency coding into a GIF file. These programs are widely available, as the resources listed below should indicate.

URLs:

The Transparent/Interlaced GIF Resource Page
Contains info for DOS, Windows, MAC and UNIX.
Creating Transparent GIFs with LView
Step by steps when using LView for Windows
Creating Transparent GIFs with TransWeb
Instructions for TransWeb a DOS graphics program
Aaron G's Projects
A collection of MAC Web utilities, including Transparency.
The Creative Internet: Transparent GIF Info
A collection of more information about GIFs.
Adobe Photoshop Windows GIF89a Export Plug-in
An excellent plug-in for Photoshop users.
The Joy of Inlined Images
A FAQ about GIFs and other Web graphics

W3E References:

GIF
Transparent GIF

Detail:

Each platform and software package creates transparent GIFs in a slightly different way. Most of the good utilities include detailed instructions about creating GIF transparency encoding.

In general, you will need to create your image using whatever graphics program is available to you. If you use as few colors as possible and leave the area you plan to turn transparent default grey (i.e. RGB 192, 192, 192) or another uniform color, the job ahead will be easier. Then, load your image into the converter and specify the area to make transparent. Once you've saved the results of your conversion, always check your image (by placing a reference to it in an HTML document, and viewing it through a browser), before inflicting it on your viewing public. That way, you can be sure they're seeing only what you want them to see!

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

E-Mail: The World Wide Web Encyclopedia at wwwe@tab.com
E-Mail: Charles River Media at chrivmedia@aol.com
Copyright 1996 Charles River Media. All rights reserved.
Text - Copyright © 1995, 1996 - James Michael Stewart & Ed Tittel.
Web Layout - Copyright © 1995, 1996 - LANWrights & IMPACT Online.
Revised -- February 20th, 1996